{{ define "content" }}
<div class="modal fade" id="config-yaml" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{ i18n "Config YAML" . }}</h4>
            </div>
            <div class="modal-body">
                <iframe src="/boggart/config/modal/" width="100%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <a href="/boggart/config/download/" class="btn btn-success">{{ i18n "Download" . }}</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ i18n "Close" . }}</button>
            </div>
        </div>
    </div>
</div>

<div class="row" id="devices">
    <div class="x_panel">
        <div class="x_title">
            <h2>{{ i18n "Bindings" . }}</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
                <li>
                    <a href="/boggart/bind/">
                        <i class="fas fa-plus" title="{{ i18n "Add bind" . }}" data-toggle="tooltip" data-placement="bottom"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#config-yaml" data-modal-title="{{ i18n "Config YAML" . }}">
                        <i class="fas fa-cogs" title="{{ i18n "Config YAML" . }}" data-toggle="tooltip" data-placement="bottom"></i>
                    </a>
                </li>
                <li>
                    <a href="/boggart/config/download/" title="{{ i18n "Download YAML" . }}" data-toggle="tooltip" data-placement="bottom">
                        <i class="fas fa-file-download"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" data-toggle="modal" data-target="#modal" data-modal-title="Confirm reload config" data-modal-callback="reloadConfig();">
                        <i class="fas fa-sync" title="{{ i18n "Reload config file" . }}" data-toggle="tooltip" data-placement="bottom"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:refreshTables()">
                        <i class="fas fa-redo" title="{{ i18n "Refresh data" . }}" data-toggle="tooltip" data-placement="bottom"></i>
                    </a>
                </li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <div class="table-responsive" style="overflow-x: visible">
                <table class="table table-striped dt-responsive nowrap" style="width:100%">
                    <thead>
                    <tr>
                        <th>{{ i18n "Type" . }}</th>
                        <th>{{ i18n "Tags" . }}</th>
                        <th>{{ i18n "Status" . }}</th>
                        <th>{{ i18n "Actions" . }}</th>
                        <th>{{ i18n "MAC" . }}</th>
                        <th>{{ i18n "Serial number" . }}</th>
                        <th>{{ i18n "ID" . }}</th>
                        <th>{{ i18n "Description" . }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row" id="types">
    <div class="x_panel" style="height:auto">
        <div class="x_title">
            <h2><i class="fa fa-deaf"></i> {{ i18n "Bind types" . }}</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-down"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="x_content" style="display:none">
            <div class="table-responsive">
                <table class="table table-striped datatable dt-responsive nowrap" style="width:100%">
                    <thead>
                    <tr>
                        <th>{{ i18n "Type" . }}</th>
                        <th>{{ i18n "Package" . }}</th>
                        <th>{{ i18n "Aliases" . }}</th>
                        <th>{{ i18n "Features" . }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ range $type := .types }}
                    <tr>
                        <td>{{ $type.Name }}</td>
                        <td>{{ $type.Package }}</td>
                        <td>
                            {{ range $alias := $type.Aliases }}
                                <span class="label label-success">{{ $alias }}</span>
                            {{ end }}
                        <td>
                            {{ range $feature := $type.Features }}
                            <span class="label label-info">{{ i18n $feature $ }}</span>
                            {{ end }}
                        </td>
                    </tr>
                    {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" false) }}

    <style type="text/css">
        .btn .badge {
            margin-left: 4px;
            top: -1px;
        }

        @media (max-width: 768px) {
            .btn .badge {
                margin-left: 5px;
            }

            .dtr-title {
                display: inline !important;
            }
            .dtr-title:after {
                content:"\a";
                white-space: pre;
            }

            .btn-group .btn {
                padding: 5px 10px;
                font-size: 12px;
                line-height: 1.5;
                border-radius: 3px;
            }

            .dropdown-menu {
                font-size: 13px;
            }
        }
    </style>
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net/js/jquery.dataTables.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/boggart/assets/js/manager.js" false) }}
{{ end }}
